<!--
    用户管理->用户积分->兑换记录
-->
<template>
  <div class="userConsume">
    <el-button
      size="medium"
      type="text"
      icon="el-icon-share"
      @click="handleTag"
      v-has="'user:userEarnings:cash'"
    >兑换记录</el-button>
      <el-dialog width="1100px" v-dialogDrag destroy-on-close :visible.sync="consumeVisible" :append-to-body='true' @close="consumeVisible = false">
          <template v-slot:title>
              <p style="font-size: 16px;margin-bottom: 0px;">手机号为<span class="red">{{statusRow.telephone}}</span>用户的积分兑换记录</p>
          </template>
          <el-table :data="evaluateList" style="width: 100%" border :height="600"  v-el-table-infinite-scroll="dialogTableListScroll"  stripe>
            <el-table-column
                  label="编号"
                  align="center"
                  type="index"
                  width="50">
            </el-table-column>
            <el-table-column prop="exchangeValue" label="兑换仟豆数" align="center"></el-table-column>
            <el-table-column prop="value" label="扣除积分" align="center"></el-table-column>
            <el-table-column prop="auditPerson" label="申请人(工号)" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.applyUserName}}({{scope.row.applyUserCode}})</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditPerson" label="审核人(工号)" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.auditUserName">{{scope.row.auditUserName}}({{scope.row.auditUserCode}})</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="审核状态" align="center">
              <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.status=='0'">待审核</el-tag>
                <el-tag type="success" v-else-if="scope.row.status=='1'">已通过</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status=='2'">已驳回</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status=='3'">撤销</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="完成时间" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime) }}</span>
              </template>
            </el-table-column>

            <p slot="append" style="text-align:center; line-height:48px;" v-if="tableLoading">正在加载...</p>
            <p slot="append" style="text-align:center; line-height:48px;" v-if="tableIsMore">没有更多了</p>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="consumeVisible = false" size="small" >关 闭</el-button>
          </div>
       </el-dialog>
  </div>


</template>

<script>
  import { pointsList } from '@/api/getData';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
 export default {
   name: 'mention',
   directives: {
     'el-table-infinite-scroll': elTableInfiniteScroll
   },
   props: ['id','statusRow'],
   data(){
     return{
       consumeVisible:false,
       userLoading:false,
       evaluateList:[],
       pageNum:1,
       pageSize:20,
       total:0,
       isNextPage:true,
       tableLoading:false,//弹框表格 正在加载
       tableIsMore:false,//弹框表格 没有更多
     }
   },
   methods:{
      handleTag(){
        this.evaluateList = [];
        this.pageNum= 1;
        this.consumeVisible = true;
        this.dataInfo();
      },
      async dataInfo(){
        try {
          let data = {
             pageNum:this.pageNum,
             pageSize:this.pageSize,
             customerId:this.id
          }
          this.tableLoading = true;
          this.tableIsMore = false;
          this.isNextPage = true;
          const result = await pointsList(data);
          if (result.code == 200) {
             let data = result.rows;
             this.evaluateList = this.evaluateList.concat(data)
              if(result.rows.length<20 && (this.pageNum != '1')){
                  this.tableIsMore = true;
              }
              if(result.rows.length<20){/*判断是否有下一页*/
                this.isNextPage = false;
              }else{

                this.isNextPage = true;
              }
          } else {
            this.$message.error(result.msg);
          }
          this.$nextTick(()=>{
            this.tableLoading = false
          })
        } catch (err) {
           this.loading = false;
          console.log(err)
        }
      },
      dialogTableListScroll(){/*弹框列表滚动*/
        if(this.isNextPage && !this.tableLoading){
          this.pageNum++;
          this.dataInfo();
        }
      },
   }
 }
</script>

<style lang="scss" scoped>
  .rateBox /deep/ .el-rate__icon{
    margin-right: 0px;
  }
  .rateBox>p{
    margin: 0px;
  }
  .rateBox>p> /deep/ .el-rate{
    height:25px;
    line-height:25px;
    display:flex;
  }
  .rateBox>p> /deep/ .el-rate .el-rate__item{
    display:flex;
    align-items: center;
  }
  .rateBox .rateText{
    width:60px;
  }
  .rateBox .content{
    display: flex;
  }
  .rateBox .el-tooltip{
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
  }
  .rateBox>p{
    height:18px
  }
</style>
